import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

// 注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger)

export class Animation3D {
  /**
   * 创建卡片入场动画
   */
  static createCardEntranceAnimation(elements: HTMLElement[], options = {}) {
    const defaultOptions = {
      duration: 0.8,
      stagger: 0.1,
      ease: "back.out(1.7)",
      ...options
    }

    return gsap.fromTo(elements, 
      {
        opacity: 0,
        y: 50,
        rotationX: -15,
        scale: 0.9
      },
      {
        opacity: 1,
        y: 0,
        rotationX: 0,
        scale: 1,
        duration: defaultOptions.duration,
        stagger: defaultOptions.stagger,
        ease: defaultOptions.ease
      }
    )
  }

  /**
   * 创建滚动视差效果
   */
  static createScrollParallax(element: HTMLElement, options = {}) {
    const defaultOptions = {
      yPercent: -50,
      ease: "none",
      ...options
    }

    return gsap.fromTo(element,
      {
        yPercent: 50
      },
      {
        yPercent: defaultOptions.yPercent,
        ease: defaultOptions.ease,
        scrollTrigger: {
          trigger: element,
          start: "top bottom",
          end: "bottom top",
          scrub: 1
        }
      }
    )
  }

  /**
   * 创建3D悬停效果
   */
  static create3DHoverEffect(element: HTMLElement, options = {}) {
    const defaultOptions = {
      rotationX: 5,
      rotationY: 5,
      scale: 1.02,
      duration: 0.3,
      ease: "power2.out",
      ...options
    }

    const onMouseEnter = () => {
      gsap.to(element, {
        rotationX: defaultOptions.rotationX,
        rotationY: defaultOptions.rotationY,
        scale: defaultOptions.scale,
        duration: defaultOptions.duration,
        ease: defaultOptions.ease
      })
    }

    const onMouseLeave = () => {
      gsap.to(element, {
        rotationX: 0,
        rotationY: 0,
        scale: 1,
        duration: defaultOptions.duration,
        ease: defaultOptions.ease
      })
    }

    element.addEventListener('mouseenter', onMouseEnter)
    element.addEventListener('mouseleave', onMouseLeave)

    return {
      destroy: () => {
        element.removeEventListener('mouseenter', onMouseEnter)
        element.removeEventListener('mouseleave', onMouseLeave)
      }
    }
  }

  /**
   * 创建弹簧动画
   */
  static createSpringAnimation(element: HTMLElement, targetProps: any, options = {}) {
    const defaultOptions = {
      duration: 0.6,
      ease: "elastic.out(1, 0.3)",
      ...options
    }

    return gsap.to(element, {
      ...targetProps,
      duration: defaultOptions.duration,
      ease: defaultOptions.ease
    })
  }

  /**
   * 创建页面加载动画
   */
  static createPageLoadAnimation() {
    const tl = gsap.timeline()
    
    // 页面淡入
    tl.fromTo('body', 
      { opacity: 0 },
      { opacity: 1, duration: 0.5 }
    )
    
    // 导航栏动画
    tl.fromTo('.navbar', 
      { y: -50, opacity: 0 },
      { y: 0, opacity: 1, duration: 0.6, ease: "back.out(1.7)" },
      "-=0.3"
    )
    
    // 主要内容动画
    tl.fromTo('.main-content', 
      { y: 30, opacity: 0 },
      { y: 0, opacity: 1, duration: 0.8, ease: "power2.out" },
      "-=0.4"
    )

    return tl
  }

  /**
   * 创建滚动触发的3D效果
   */
  static createScrollTrigger3D(element: HTMLElement, options = {}) {
    const defaultOptions = {
      start: "top 80%",
      end: "bottom 20%",
      toggleActions: "play none none reverse",
      ...options
    }

    return ScrollTrigger.create({
      trigger: element,
      start: defaultOptions.start,
      end: defaultOptions.end,
      toggleActions: defaultOptions.toggleActions,
      onEnter: () => {
        gsap.fromTo(element,
          {
            opacity: 0,
            y: 50,
            rotationX: -10
          },
          {
            opacity: 1,
            y: 0,
            rotationX: 0,
            duration: 0.8,
            ease: "back.out(1.7)"
          }
        )
      },
      onLeave: () => {
        gsap.to(element, {
          opacity: 0.7,
          y: -20,
          duration: 0.4,
          ease: "power2.out"
        })
      },
      onEnterBack: () => {
        gsap.to(element, {
          opacity: 1,
          y: 0,
          duration: 0.4,
          ease: "power2.out"
        })
      }
    })
  }

  /**
   * 性能优化：批量设置will-change属性
   */
  static optimizeElements(elements: HTMLElement[]) {
    elements.forEach(element => {
      element.style.willChange = 'transform, opacity, box-shadow'
      element.style.backfaceVisibility = 'hidden'
      element.style.perspective = '1000px'
    })
  }

  /**
   * 清理动画和事件监听器
   */
  static cleanup() {
    ScrollTrigger.getAll().forEach(trigger => trigger.kill())
    gsap.killTweensOf("*")
  }
}

// 导出常用的缓动函数
export const easings = {
  spring: "elastic.out(1, 0.3)",
  bounce: "bounce.out",
  smooth: "power2.out",
  sharp: "power4.inOut",
  gentle: "sine.inOut"
}

// 导出常用的动画配置
export const animationConfigs = {
  card: {
    hover: {
      scale: 1.02,
      rotationX: 5,
      rotationY: 5,
      duration: 0.3,
      ease: easings.smooth
    },
    click: {
      scale: 0.95,
      duration: 0.1,
      ease: easings.sharp
    },
    entrance: {
      duration: 0.8,
      stagger: 0.1,
      ease: easings.spring
    }
  },
  page: {
    transition: {
      duration: 0.6,
      ease: easings.smooth
    }
  }
}